<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
		<meta charset="UTF-8">
		<title>购物车</title>
		<style type="text/css">
			/* 定义一个名为 [v-cloak] 的样式，用于在 Vue 初始化完成前隐藏元素 */
			[v-cloak] {
				display: none;
			}

			table {
				width: 620px;
				border: 1px solid red;
				text-align: center;
			}

			thead {
				background-color: cornflowerblue;
			}

			/* 定义一个弹出框的样式，包括绝对定位、位置、背景、大小和内边距 */
			#pop {
				position: absolute;
				left: 40%;
				top: 200px;
				z-index: 1999;
				background: rgba(0, 0, 0, .3);
				width: 380px;
				height: 100px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container" v-cloak>
			<!-- 显示购物车标题 -->
			<h3>购物车</h3>
			<!-- 购物车表格 -->
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<!-- 表格列标题：商品名称 -->
						<td>商品名称</td>
						<!-- 表格列标题：商品单价 -->
						<td>商品单价</td>
						<!-- 表格列标题：购买数量 -->
						<td>购买数量</td>
						<!-- 表格列标题：操作 -->
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 v-for 指令遍历 cartItems 数组创建购物车商品行 -->
					<tr v-for="(item, index) in cartItems">
						<!-- 显示商品名称 -->
						<td>{{item.name}}</td>
						<!-- 显示商品单价 -->
						<td>{{item.price}}</td>
						<td>
							<!-- 点击减少购买数量的按钮 -->
							<button @click="decreaseQuantity(index)" class="btn btn-default">-</button>
							<!-- 显示当前商品的购买数量 -->
							{{item.quantity}}
							<!-- 点击增加购买数量的按钮 -->
							<button @click="increaseQuantity(index)" class="btn btn-default">+</button>
						</td>
						<td>
							<!-- 点击删除当前商品的按钮 -->
							<button @click="deleteItem(index)" class="btn btn-danger">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- 显示购物车总价 -->
			<p>总价: {{totalPrice}}</p>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app", // 指定 Vue 实例挂载的元素
				data: { // 定义数据
					cartItems: [ // 购物车商品数组
						{
							name: "苹果",
							price: 5,
							quantity: 2
						},
						{
							name: "香蕉",
							price: 3,
							quantity: 3
						},
						{
							name: "橙子",
							price: 4,
							quantity: 1
						}
					]
				},
				methods: { // 定义方法
					increaseQuantity(index) { // 增加商品购买数量的方法
						this.cartItems[index].quantity++;
					},
					decreaseQuantity(index) { // 减少商品购买数量的方法
						if (this.cartItems[index].quantity > 1) {
							this.cartItems[index].quantity--;
						}
					},
					deleteItem(index) { // 删除商品的方法
						this.cartItems.splice(index, 1);
					}
				},
				computed: { // 计算属性
					totalPrice() { // 计算购物车总价的方法
						let total = 0;
						for (let item of this.cartItems) {
							total += item.price * item.quantity;
						}
						return total;
					}
				}
			});
		</script>
	</body>
</html>